<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
			<el-form ref="dialogFormRef" :model="state" :rules="state.rules" size="default" label-width="100px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="所属需求" prop="ruleForm.requirementId">
							<el-select
								v-model="state.ruleForm.requirementId"
								filterable
								remote
								reserve-keyword
								placeholder="可输入需求号或者需求关键字查找"
								:remote-method="getRequirementList"
								:loading="loading"
								class="w100"
								clearable
							>
								<el-option
								v-for="item in requirementOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="交易码" prop="ruleForm.tranCode">
							<el-input v-model="state.ruleForm.tranCode" placeholder="请输入交易码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="操作类型" prop="ruleForm.oprtType">
							<el-select v-model="state.ruleForm.oprtType" clearable>
							<el-option
								v-for="item in oprtTypeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								placeholder="请选择操作类型"
								/>
						</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务场景码" prop="ruleForm.serviceScence">
							<el-input v-model="state.ruleForm.serviceScence" @input="splitServiceScence" placeholder="请输入服务场景码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="接口名称" prop="ruleForm.interfaceName">
							<el-input v-model="state.ruleForm.interfaceName" placeholder="请输入接口名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务码" prop="ruleForm.serviceCode">
							<el-input v-model="state.ruleForm.serviceCode" @input="mergeServiceScence" placeholder="请输入服务码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务名称" prop="ruleForm.serviceName">
							<el-input v-model="state.ruleForm.serviceName" placeholder="请输入服务名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="场景码" prop="ruleForm.scenceCode">
							<el-input v-model="state.ruleForm.scenceCode" @input="mergeServiceScence" placeholder="请输入场景码" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="场景名称" prop="ruleForm.scenceName">
							<el-input v-model="state.ruleForm.scenceName" placeholder="请输入场景名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="消费者" prop="ruleForm.consumer">
							<el-input v-model="state.ruleForm.consumer" placeholder="请输入消费者" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="提供者" prop="ruleForm.provider">
							<el-input v-model="state.ruleForm.provider" placeholder="请输入提供者" clearable></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="开发人员" prop="ruleForm.developer">
							<el-input v-model="state.ruleForm.developer" placeholder="请输入开发人员" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="治理人员" prop="ruleForm.governancer">
							<el-input v-model="state.ruleForm.governancer" placeholder="请输入治理人员" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="查阅文档" prop="ruleForm.consultDoc">
							<el-input v-model="state.ruleForm.consultDoc" placeholder="请输入查阅文档" clearable></el-input>
						</el-form-item>
					</el-col>
					<template v-if="state.ruleForm.oprtType === '修改'">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-form-item label="修订内容" prop="ruleForm.revisionContent">
								<el-input v-model="state.ruleForm.revisionContent" placeholder="请输入修订内容" clearable></el-input>
							</el-form-item>
						</el-col>
					</template>
					
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="需求状态"  prop="ruleForm.status">
							<el-radio-group v-model="state.ruleForm.status">
								<el-radio label="0">未开发</el-radio>
								<el-radio label="1">开发中</el-radio>
								<el-radio label="2">开发完成</el-radio>
								<el-radio label="3">上线</el-radio>
								<el-radio label="4">撤销</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注" prop="ruleForm.remarks">
							<el-input v-model="state.ruleForm.remarks" placeholder="请输入备注" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(dialogFormRef)" size="default">{{ state.dialog.submitTxt
					}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { requirementContentApi } from './api';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入 api 请求接口
const api = requirementContentApi();
// 定义变量内容
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '',//主键id
		requirementId:'',//需求id
		requirementName:'',//需求名称
		requirementNum:'',//需求号
		tranCode:'无',//交易码
		interfaceName:'',//接口名称
		serviceScence:'',//服务场景码
		serviceCode:'',//服务码
		serviceName:'',//服务名称
		scenceCode:'',//场景码
		scenceName:'',//场景名称
		consumer:'',//消费者
		provider:'',//提供者
		oprtType:'',//操作类型
		developer: '', // 开发人员
		governancer: '', // 治理人员
		consultDoc:'',//查阅文档
		revisionContent:'',//修订内容
		status:'0',//需求状态
		remarks:''//备注
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	rules: {
		'ruleForm.requirementId': { required: true, message: '请输入需求名称', trigger: 'blur' },
		'ruleForm.tranCode': { required: true, message: '请输入需求名称', trigger: 'blur' },
		'ruleForm.interfaceName': { required: true, message: '请输入需求号', trigger: 'blur' },
		'ruleForm.serviceScence': { required: true, message: '请输入服务场景码', trigger: 'blur' },
		'ruleForm.serviceCode': { required: true, message: '请选择需求状态	', trigger: 'blur' },
		'ruleForm.serviceName': { required: true, message: '请输入需求名称', trigger: 'blur' },
		'ruleForm.scenceCode': { required: true, message: '请输入需求号', trigger: 'blur' },
		'ruleForm.scenceName': { required: true, message: '请选择需求状态	', trigger: 'blur' },
		'ruleForm.consumer': { required: true, message: '请输入需求名称', trigger: 'blur' },
		'ruleForm.provider': { required: true, message: '请输入需求号', trigger: 'blur' },
		'ruleForm.oprtType': { required: true, message: '请选择需求状态	', trigger: 'blur' },
		'ruleForm.developer': { required: true, message: '请输入需求名称', trigger: 'blur' },
		'ruleForm.governancer': { required: true, message: '请输入需求号', trigger: 'blur' },
		'ruleForm.consultDoc': { required: true, message: '请选择需求状态	', trigger: 'blur' },
		'ruleForm.revisionContent': { required: true, message: '请输入需求名称', trigger: 'blur' },
	},
});

const oprtTypeOptions = [
  {
    value: '新增',
    label: '新增',
  },
  {
    value: '修改',
    label: '修改',
  },
  {
    value: '复用',
    label: '复用',
  },
  {
    value: '删除',
    label: '删除',
  },
]

interface ListItem {
  value: string
  label: string
}

const requirementOptions = ref<ListItem[]>([])
const loading = ref(false)

//关键字查询需求信息
const getRequirementList = (query: string) => {
  if (query) {
    loading.value = true
	//通过id集合字符串去后台查询名称
	api.getRequirementList({"keywords":query}).then(
		function (res) {
			loading.value = false
			const data = res.data;
			requirementOptions.value = data.map((item: any) => {
				return { value: `${item.id}`, label: `${item.num}`+`${item.name}` }
			})
		}
	)
  } else {
    requirementOptions.value = []
  }
}

//拆分服务场景码
const splitServiceScence = () => {
	if((state.ruleForm.serviceScence != null) && (state.ruleForm.serviceScence != '') && (state.ruleForm.serviceScence.length == 13)){
		state.ruleForm.serviceCode = state.ruleForm.serviceScence.substring(0,11);
		state.ruleForm.scenceCode = state.ruleForm.serviceScence.substring(11,13);
	}
}

//合并服务码、场景码
const mergeServiceScence = () => {
	state.ruleForm.serviceScence = state.ruleForm.serviceCode +''+state.ruleForm.scenceCode
}

// 打开弹窗
const openDialog = (type: string, row: any) => {
	if (type === 'edit') {
		state.ruleForm = row;
		state.dialog.title = '修改需求内容';
		state.dialog.submitTxt = '修 改';
		//通过id集合字符串去后台查询名称
		requirementOptions.value = [{value:state.ruleForm.requirementId,label:state.ruleForm.requirementNum+state.ruleForm.requirementName}]
	} else {
		//新增时 主键id置为空
		state.ruleForm.id = '';
		state.dialog.title = '新增需求内容';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			// console.log('校验通过！')
			api.save(state.ruleForm).then(
				(res) => {
					if (res.data.code === "000000") {
						ElMessage.success(res.data.message);
						closeDialog(); // 关闭弹窗
						emit('refresh');
					} else {
						ElMessage.warning(res.data.message);
					}
				}
			)
		} else {
			// console.log('校验未通过！')
			return false
		}
	})
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
